<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="less/bootstrap.css">
    <link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<!-- Button trigger modal -->

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#register">register modal</button>

<div class="modal fade register" id="register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" aria-hidden="true">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">

                    <div class="row login register">

                        <div class="login_fr">

                            <h2 class="title">注册中心</h2>
                            <form id="registerform" method="get">
                                <table>
                                    <tbody>
                                    <tr>
                                        <td class="w140"><i class="mark orange">*</i>邮箱：</td>
                                        <td class="w348"><input type="email" name="username" placeholder="请输入邮箱账号进行注册"/></td>
                                    </tr>
                                    <tr height="8px">
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="w140"><i class="mark orange">*</i>设置密码：</td>
                                        <td><input type="password" name="password" placeholder="请输入账不少于8位的账号密码" id="field"/><i class="icon icon_nosee passwordsee"></i></td>
                                    </tr>
                                    <tr height="8px">
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="w140"><i class="mark orange">*</i>确认密码：</td>
                                        <td><input type="password" name="rpassword" placeholder="请再次输入密码"/><i class="icon icon_nosee passwordsee"></i></td>
                                    </tr>
                                    <tr height="8px">
                                        <td></td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="w140">手机号码：</td>
                                        <td><input type="text" name="telephone" placeholder="请输入可以联系的手机号码" class="ignore"/></td>
                                    </tr>
                                    <tr>
                                        <td class="w140"></td>
                                        <td class="signup"><a href="javascript:;">已有账号登入</a></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <div class="agreement">
                                                <p><input type="checkbox" name="agreement" checked="checked" /><a href="javascript:;">我已阅读并同意《淘淘乐用户服务协议》</a></p>
                                                <p><input type="submit" class="btnsubmit" value="注册登入"/></p>
                                            </div>
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>

                            </form>

                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>




<script src="js/jquery-1.12.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script>
    $(document).ready(function() {

        $("#registerform").validate({
            //debug:true ,
            //如果这个参数为true，那么表单不会提交，只进行检查，调试时十分方便
            rules:{
                username:{required:true,
                          email:true,
                          remote:{//远程地址只能输出 "true" 或 "false"，不能有其它输出
                             url:"check_username.php",
                             type:"post",//传值方式
                             dataType: "json",//接受数据格式
                              data:{
                                  //要传过的值  返回true时表示通过验证，false反
                                  username: function() {
                                      return $("#username").val();
                                  }
                              }

                          }
                },
                password:{required:true,minlength:8},
                rpassword:{required:true,equalTo:"#field"},
                agreement:{required:true}
            },
            messages:{
                username:{required:"请输入用户名",email:"请输入正确的邮箱格式",remote:"用户名已存在"},
                password:{required :'请输入密码',minlength:"请输入不少于8位的密码"},
                rpassword:{required:'请确认密码',equalTo:"输入号码不一致"},
                agreement:{required:'请先选择协议'}

            },
            errorElement:"p",//用来创建错误提示信息标签(可自定义)
            onkeyup: false,
            ignore: ".ignore",
            focusCleanup:'true',
            validClass:"success",
            errorPlacement:function(error, element){//处理错误信息位置，在下面的复选框用到
                //console.log(error);
                //console.log(element);
                if(element.is(":radio")||element.is(":checkbox")){
                    error.appendTo(element.parent());
                }else{
                    console.log('yjj');
                    error.insertAfter(element);
                }

            },
            success : function(label,element){
                //console.log(1);
                //console.log(label);
                //console.log(arguments);
                if($(element).is(":checkbox")){
                    $(label).remove();
                }else{
                    //验证成功后执行的回调函数，label指向上面那个错误提 示信息标签em
                    label.text( ' ' ).addClass("success")  //添加上自定义的success类
                }

            },
            submitHandler: function(form)
            {
                alert(1);
                //$(form).ajaxSubmit();
                $.ajax({
                    url:'check.php',
                    type:'post',
                    dataType:'json',
                    data:$('#registerform').serialize(),
                    success:function(data){
                        $.each(data,function(i,v){
                            if(v.msg == false){
                                alert("类型已存在！");
                            }else{
                                showTypeList(v.typeData);
                            }

                        });
                    },
                    error:function(){
                        alert('信息错误')
                    }
                });
                return false;//阻止表单提交
            },
            invalidHandler: function(form, validator) {  //不通过回调
                return false;
            }
        });
    });

</script>
</body>
</html>